<template>
  <div v-if="visible" class="modal-overlay">
    <div class="modal-content">
      <!-- 左侧图片区域 -->
      <div class="modal-left"></div>

      <!-- 右侧表单区域 -->
      <div class="modal-right">
        <div class="modal-header">
          <button class="close-btn" @click="closeModal">
            <img src="~/assets/images/img/A-2-1-PC登陆-注册_slices/关闭.png" alt="关闭" class="close-icon">
          </button>
        </div>

        <!-- 注册步骤 -->
        <template v-if="currentStep === 'register'">
          <h2 class="modal-title">创建账号</h2>

          <form class="register-form" @submit.prevent="handleRegister">
            <div class="form-group">
              <input 
                type="text" 
                v-model="phone" 
                placeholder="手机号码" 
                class="form-input"
                required
              >
            </div>

            <div class="form-group password-group">
              <input 
                :type="showPassword ? 'text' : 'password'" 
                v-model="password" 
                placeholder="登录密码" 
                class="form-input"
                required
              >
              <button 
                type="button" 
                class="toggle-password" 
                @click="showPassword = !showPassword"
              >
                <img src="~/assets/images/img/A-2-1-PC登陆-注册_slices/眼睛显隐.png" alt="显示/隐藏密码" class="toggle-password-icon">
              </button>
            </div>

            <button type="submit" class="register-btn">注册</button>
          </form>

          <div class="login-link">
            <span>已有账号，</span>
            <a href="#" @click.prevent="switchToLogin">马上登录</a>
          </div>

          <div class="social-login">
            <div class="social-icon-wrapper">
              <div 
                class="social-icon"
                @mouseenter="hoverIcon1 = true"
                @mouseleave="hoverIcon1 = false"
              >
                <img :src="hoverIcon1 ? socialIcon1Hover : socialIcon1" alt="三方登录1" class="social-icon-img">
              </div>
            </div>
            <div class="social-icon-wrapper">
              <div 
                class="social-icon"
                @mouseenter="hoverIcon2 = true"
                @mouseleave="hoverIcon2 = false"
              >
                <img :src="hoverIcon2 ? socialIcon2Hover : socialIcon2" alt="三方登录2" class="social-icon-img">
              </div>
              <div class="last-login">(上次登录)</div>
            </div>
            <div class="social-icon-wrapper">
              <div 
                class="social-icon"
                @mouseenter="hoverIcon3 = true"
                @mouseleave="hoverIcon3 = false"
              >
                <img :src="hoverIcon3 ? socialIcon3Hover : socialIcon3" alt="三方登录3" class="social-icon-img">
              </div>
            </div>
          </div>

          <div class="legal-disclaimer">
            注册和登录即视为您已阅读并同意
            <a href="#">《网站协议》</a>
            <a href="#">《版权声明》</a>
          </div>
        </template>

        <!-- 验证步骤 -->
        <template v-else-if="currentStep === 'verify'">
          <h2 class="modal-title">欢迎加入我们</h2>
          
          <div class="verify-subtitle">
            <span class="verify-text">验证手机号</span><span class="verify-phone">{{ maskedPhone }}</span><span class="verify-text">的有效性</span>
          </div>

          <!-- 滑块验证 -->
          <div class="slider-verify">
            <div class="slider-track" :class="{ 'slider-complete': isSliderComplete }" ref="sliderTrack">
              <div class="slider-progress" :style="{ width: sliderPosition + 'px' }"></div>
              <div v-if="!isSliderComplete" class="slider-text">请按住滑块,拖动到最右边</div>
              <div v-if="isSliderComplete" class="slider-success-content">
                <span class="verify-success-text">验证成功</span>
              </div>
              <div 
                class="slider-handle" 
                :class="{ 'slider-handle-complete': isSliderComplete }"
                :style="{ left: sliderPosition + 'px' }"
                @mousedown="startDrag"
              >
                <img :src="isSliderComplete ? verifySuccessIcon : sliderIcon" alt="验证" class="slider-arrow">
              </div>
            </div>
          </div>

          <!-- 手机验证码输入 -->
          <div v-if="isSliderComplete" class="form-group verify-code-group">
            <input 
              type="text" 
              v-model="verifyCode" 
              placeholder="手机验证码" 
              class="form-input verify-code-input"
            >
            <button type="button" class="get-code-btn" @click="getVerifyCode">
              获取验证码
            </button>
          </div>

          <div class="form-group nickname-group">
            <input 
              type="text" 
              v-model="nickname" 
              placeholder="昵称(非必填)" 
              class="form-input"
            >
          </div>

          <button 
            type="button" 
            class="register-btn" 
            :disabled="!isSliderComplete"
            @click="handleConfirm"
          >
            确定
          </button>

          <div class="back-link">
            <a href="#" @click.prevent="goBack">返回上一步</a>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close', 'switchToLogin'])

const phone = ref('')
const password = ref('')
const showPassword = ref(false)
const currentStep = ref('register') // 'register' 或 'verify'
const nickname = ref('')
const verifyCode = ref('')
const sliderPosition = ref(0)
const isSliderComplete = ref(false)
const isDragging = ref(false)
const sliderTrack = ref(null)

// 三方登录图标 - 默认状态
const socialIcon1 = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/三方登录图标.png')
const socialIcon2 = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/三方登录图标(1).png')
const socialIcon3 = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/三方登录图标(2).png')

// 三方登录图标 - 悬停状态
const socialIcon1Hover = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/登陆_三方登陆按钮悬停状态_slices/三方登录图标(4).png')
const socialIcon2Hover = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/登陆_三方登陆按钮悬停状态_slices/三方登录图标(5).png')
const socialIcon3Hover = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/登陆_三方登陆按钮悬停状态_slices/三方登录图标(7).png')

// 悬停状态
const hoverIcon1 = ref(false)
const hoverIcon2 = ref(false)
const hoverIcon3 = ref(false)

// 滑块图标
const sliderIcon = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/登陆点击验证.png')

// 验证成功图标
const verifySuccessIcon = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/符号组合.png')

const closeModal = () => {
  emit('close')
}

const switchToLogin = () => {
  emit('switchToLogin')
}

const handleRegister = () => {
  console.log('注册:', { phone: phone.value, password: password.value })
  // 切换到验证步骤
  currentStep.value = 'verify'
  sliderPosition.value = 0
  isSliderComplete.value = false
}

const goBack = () => {
  currentStep.value = 'register'
  nickname.value = ''
  sliderPosition.value = 0
  isSliderComplete.value = false
}

const handleConfirm = () => {
  console.log('确认:', { phone: phone.value, nickname: nickname.value, verifyCode: verifyCode.value })
  // 这里可以添加确认逻辑
}

const getVerifyCode = () => {
  console.log('获取验证码:', phone.value)
  // 这里可以添加获取验证码的逻辑
}

// 手机号脱敏显示
const maskedPhone = computed(() => {
  if (!phone.value || phone.value.length < 7) return phone.value
  const start = phone.value.substring(0, 3)
  const end = phone.value.substring(phone.value.length - 4)
  return `${start}****${end}`
})

// 滑块拖拽功能
const startDrag = (e) => {
  if (isSliderComplete.value) return // 如果已完成，不允许拖动
  isDragging.value = true
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
  e.preventDefault()
}

const onDrag = (e) => {
  if (!isDragging.value || !sliderTrack.value) return
  
  const trackRect = sliderTrack.value.getBoundingClientRect()
  const maxPosition = trackRect.width - 58 // 滑块宽度58px
  let newPosition = e.clientX - trackRect.left - 29
  
  if (newPosition < 0) newPosition = 0
  if (newPosition > maxPosition) {
    newPosition = maxPosition
    isSliderComplete.value = true
  } else {
    isSliderComplete.value = false
  }
  
  sliderPosition.value = newPosition
}

const stopDrag = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  width: 680px;
  height: 520px;
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-left {
  width: 300px;
  height: 520px;
  background: url('~/assets/images/img/A-2-1-PC登陆-注册_slices/登陆框_广告位.png') center/cover no-repeat;
  position: relative;
  flex-shrink: 0;
}

.modal-right {
  width: 380px;
  padding: 10px 35px;
  background: white;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal-header {
  width: 100%;
  height: 40px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 0;
  right: -20px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.close-btn:hover {
  opacity: 0.7;
}

.close-icon {
  width: auto;
  height: auto;
  display: block;
}

.modal-title {
  font-size: 18px;
  color: #333;
  margin: 0 0 30px 0;
  text-align: center;
  font-weight: 500;
}

.register-form {
  margin-bottom: 15px;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.form-group.nickname-group {
  margin-bottom: 50px;
}

.password-group {
  margin-bottom: 30px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 4px;
  background: #F5F5F5;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: border-color 0.3s;
}

.form-input:focus {
  border-color: #19D8B6;
  background: #F5F5F5;
}

.form-input::placeholder {
  color: #999;
}

.toggle-password {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.toggle-password:hover {
  opacity: 0.7;
}

.toggle-password-icon {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

.register-btn {
  width: 100%;
  padding: 10px;
  background: #19D8B6;
  color: white;
  border: none;
  border-radius: 182px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
}

.register-btn:hover {
  background: #00C099;
}

.login-link {
  text-align: right;
  margin-bottom: 50px;
  font-size: 12px;
  color: #B3B3B3;
}

.login-link a {
  color: #19D8B6;
  text-decoration: none;
  margin-left: 4px;
}

.login-link a:hover {
  text-decoration: underline;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-bottom: 30px;
}

.social-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.social-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
}

.social-icon:hover {
  border-color: #19D8B6;
  background: #f5f5f5;
}

.social-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.last-login {
  font-size: 11px;
  color: #19D8B6;
  white-space: nowrap;
  text-align: center;
}

.legal-disclaimer {
  font-size: 12px;
  color: #B3B3B3;
  text-align: center;
  white-space: nowrap;
  margin-top: auto;
  margin-bottom: 0;
}

.legal-disclaimer a {
  color: #666;
  text-decoration: none;
}

.legal-disclaimer a:hover {
  text-decoration: underline;
}

/* 验证步骤样式 */
.verify-subtitle {
  font-size: 14px;
  text-align: center;
  margin-bottom: 60px;
}

.verify-text {
  color: #B3B3B3;
}

.verify-phone {
  color: #666;
}

.slider-verify {
  margin-bottom: 20px;
}

.slider-track {
  width: 100%;
  height: 40px;
  background: #F5F5F5;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 50px;
  padding-right: 10px;
  overflow: hidden;
}

.slider-track.slider-complete {
  background: #19D8B6;
  padding-left: 12px;
  padding-right: 12px;
}

.slider-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #19D8B6;
  border-radius: 4px;
  transition: width 0.1s;
  z-index: 0;
}

.slider-track.slider-complete .slider-progress {
  width: 100% !important;
}

.slider-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 40px;
  background: white;
  border-radius: 4px;
  border: 2px solid #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  transition: background 0.2s, border-color 0.2s;
  z-index: 2;
}

.slider-handle.slider-handle-complete {
  border-color: #19D8B6;
}

.slider-handle:active {
  cursor: grabbing;
  background: #f0f0f0;
}

.slider-arrow {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.slider-text {
  font-size: 14px;
  color: #999;
  position: absolute;
  left: 50px;
  right: 10px;
  text-align: center;
  pointer-events: none;
  z-index: 1;
  width: calc(100% - 60px);
}

.slider-success-content {
  position: absolute;
  left: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  pointer-events: none;
  width: calc(100% - 24px);
}

.back-link {
  text-align: center;
  margin-top: 20px;
}

.back-link a {
  font-size: 12px;
  color: #19D8B6;
  text-decoration: none;
}

.back-link a:hover {
  text-decoration: underline;
}

.register-btn:disabled {
  background: #19D8B6;
  cursor: not-allowed;
  opacity: 0.6;
}

.register-btn:disabled:hover {
  background: #19D8B6;
  opacity: 0.6;
}

/* 验证成功状态 */
.verify-success {
  margin-bottom: 20px;
}

.verify-success-bar {
  width: 100%;
  height: 40px;
  background: #19D8B6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

.verify-success-text {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.verify-success-icon {
  width: 24px;
  height: 24px;
  border: 1px dashed #4CAF50;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

.verify-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 验证码输入组 */
.verify-code-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.verify-code-input {
  flex: 1;
}

.get-code-btn {
  padding: 12px 20px;
  background: #342C2A;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s;
}

.get-code-btn:hover {
  background: #555;
}
</style>

